<style lang="less" scoped>
@import "./list.less";
</style>
<template>
  <div>
    <Row>
      <Col span="24">
      <Card style="margin-bottom: 10px">
        <Form inline>
          <FormItem style="margin-bottom: 0">
            <Select v-model="searchConf.status"
                    clearable
                    placeholder='请选择状态'
                    style="width:100px">
              <Option :value="1">启用</Option>
              <Option :value="0">禁用</Option>
            </Select>
          </FormItem>
          <FormItem style="margin-bottom: 0">
            <Select v-model="searchConf.type"
                    clearable
                    placeholder="请选择类别"
                    style="width:100px">
              <Option :value="1">应用组标识</Option>
              <Option :value="2">应用组名称</Option>
            </Select>
          </FormItem>
          <FormItem style="margin-bottom: 0">
            <Input v-model="searchConf.keywords"
                   placeholder=""></Input>
          </FormItem>
          <FormItem style="margin-bottom: 0">
            <Button type="primary"
                    @click="search">查询/刷新</Button>
          </FormItem>
        </Form>
      </Card>
      </Col>
    </Row>
    <Row>
      <Col span="24">
      <Card>
        <p slot="title"
           style="height: 32px">
          <Button type="primary"
                  @click="alertAdd"
                  icon="md-add">新增</Button>
        </p>
        <div>
          <Table :columns="columnsList"
                 :data="tableData"
                 :loading="tableLoading"
                 border
                 disabled-hover></Table>
        </div>
        <div class="margin-top-15"
             style="text-align: center">
          <Page :total="tableShow.listCount"
                :current="tableShow.currentPage"
                :page-size="tableShow.pageSize"
                @on-change="changePage"
                @on-page-size-change="changeSize"
                show-elevator
                show-sizer
                show-total></Page>
        </div>
      </Card>
      </Col>
    </Row>
    <Modal v-model="modalSetting.show"
           width="668"
           :styles="{top: '30px'}"
           @on-visible-change="doCancel">
      <p slot="header"
         style="color:#2d8cf0;">
        <Icon type="md-information-circle"></Icon>
        <span>{{formItem.id ? '编辑' : '新增'}}应用组</span>
      </p>
      <Form ref="myForm"
            :rules="ruleValidate"
            :model="formItem"
            :label-width="80">
        <FormItem label="组名称"
                  prop="name">
          <Input v-model="formItem.name"
                 placeholder="请输入应用组名称"></Input>
        </FormItem>
        <FormItem label="组标识"
                  prop="hash">
          <Input style="width: 300px"
                 disabled
                 v-model="formItem.hash"></Input>
          <Tag color="error"
               style="margin-left:5px">系统自动生成，不允许修改</Tag>
        </FormItem>
        <FormItem label="组描述"
                  prop="description">
          <Input v-model="formItem.description"
                 :autosize="{maxRows: 10, minRows: 4}"
                 type="textarea"
                 placeholder="请输入应用组描述"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text"
                @click="cancel"
                style="margin-right: 8px">取消</Button>
        <Button type="primary"
                @click="submit"
                :loading="modalSetting.loading">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import api from '@/api/app';
import { indexPage } from '@/views/mixins/common';

const editButton = (vm, h, currentRow, index) => {
    return h('Button', {
        props: {
            type: 'primary'
        },
        style: {
            margin: '0 5px'
        },
        on: {
            'click': () => {
                vm.formItem.id = currentRow.id;
                vm.formItem.name = currentRow.name;
                vm.formItem.hash = currentRow.hash;
                vm.formItem.description = currentRow.description;
                vm.modalSetting.show = true;
                vm.modalSetting.index = index;
            }
        }
    }, '编辑');
};
const deleteButton = (vm, h, currentRow, index) => {
    return h('Poptip', {
        props: {
            confirm: true,
            title: '您确定要删除这条数据吗? ',
            transfer: true
        },
        on: {
            'on-ok': () => {
                api.delAppGroup({
                    hash: currentRow.hash
                }).then(() => {
                    vm.tableData.splice(index, 1);
                });
            }
        }
    }, [
        h('Button', {
            style: {
                margin: '0 5px'
            },
            props: {
                type: 'error',
                placement: 'top',
                loading: currentRow.isDeleting
            }
        }, '删除')
    ]);
};

export default {
    name: 'interface_group',
    mixins: [indexPage],
    data () {
        return {
            columnsList: [
                {
                    title: '序号',
                    type: 'index',
                    width: 65,
                    align: 'center'
                },
                {
                    title: '应用组名称',
                    align: 'center',
                    key: 'name'
                },
                {
                    title: '应用组描述',
                    align: 'center',
                    key: 'description'
                },
                {
                    title: '应用组标识',
                    align: 'center',
                    key: 'hash',
                    width: 130
                },
                {
                    title: '应用组状态',
                    align: 'center',
                    key: 'status',
                    width: 100
                },
                {
                    title: '操作',
                    align: 'center',
                    key: 'handle',
                    width: 180,
                    handle: ['edit', 'delete']
                }
            ],
            // tableData: [],
            // tableShow: {
            //     currentPage: 1,
            //     pageSize: 10,
            //     listCount: 0
            // },
            // searchConf: {
            //     type: '',
            //     keywords: '',
            //     status: ''
            // },
            // modalSetting: {
            //     show: false,
            //     loading: false,
            //     index: 0
            // },
            formItem: {
                description: '',
                name: '',
                hash: '',
                id: 0
            },
            ruleValidate: {
                name: [
                    { required: true, message: '应用组名称不能为空', trigger: 'blur' }
                ]
            }
        };
    },
    methods: {
        init () {
            let vm = this;
            this.apiFn = api.getGroupList;
            this.columnsList.forEach(item => {
                if (item.handle) {
                    item.render = (h, param) => {
                        let currentRowData = vm.tableData[param.index];
                        return h('div', [
                            editButton(vm, h, currentRowData, param.index),
                            deleteButton(vm, h, currentRowData, param.index)
                        ]);
                    };
                }
                if (item.key === 'status') {
                    item.render = (h, param) => {
                        let currentRowData = vm.tableData[param.index];
                        return h('i-switch', {
                            attrs: {
                                size: 'large'
                            },
                            props: {
                                'true-value': 1,
                                'false-value': 0,
                                value: currentRowData.status
                            },
                            on: {
                                'on-change': function (status) {
                                    api.changeStatus({
                                        status: status,
                                        id: currentRowData.id
                                    });
                                }
                            }
                        }, [
                            h('span', {
                                slot: 'open'
                            }, '启用'),
                            h('span', {
                                slot: 'close'
                            }, '禁用')
                        ]);
                    };
                }
            });
        },
        alertAdd () {
            let vm = this;
            api.getHash().then(data => {
                vm.formItem.hash = data.hash;
            });
            this.modalSetting.show = true;
        },
        submit () {
            let self = this;
            this.$refs['myForm'].validate((valid) => {
                if (valid) {
                    self.modalSetting.loading = true;
                    let target = '';
                    if (this.formItem.id === 0) {
                        target = 'AppGroup/add';
                    } else {
                        target = 'AppGroup/edit';
                    }
                    api.modifyAppGroup(target, self.formItem).then(() => {
                        self.getList();
                        self.cancel();
                    });
                }
            });
        }
    // cancel () {
    //     this.modalSetting.show = false;
    // },
    // changePage (page) {
    //     this.tableShow.currentPage = page;
    //     this.getList(api.getGroupList);
    // },
    // changeSize (size) {
    //     this.tableShow.pageSize = size;
    //     this.getList(api.getGroupList);
    // },
    // search () {
    //     this.tableShow.currentPage = 1;
    //     this.getList(api.getGroupList);
    // },
    // getList () {
    //     let vm = this;
    //     axios.get('AppGroup/index', {
    //         params: {
    //             page: vm.tableShow.currentPage,
    //             size: vm.tableShow.pageSize,
    //             type: vm.searchConf.type,
    //             keywords: vm.searchConf.keywords,
    //             status: vm.searchConf.status
    //         }
    //     }).then(function (response) {
    //         let res = response.data;
    //         if (res.code === 1) {
    //             vm.tableData = res.data.list;
    //             vm.tableShow.listCount = res.data.count;
    //         } else {
    //             if (res.code === -14) {
    //                 vm.$store.commit('logout', vm);
    //                 vm.$router.push({
    //                     name: 'login'
    //                 });
    //             } else {
    //                 vm.$Message.error(res.msg);
    //             }
    //         }
    //     });
    // },
    // doCancel (data) {
    //     if (!data) {
    //         this.formItem.id = 0;
    //         this.$refs['myForm'].resetFields();
    //         this.modalSetting.loading = false;
    //         this.modalSetting.index = 0;
    //     }
    // }
    }
};
</script>
